<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item label="">
                    <el-select clearable v-model="form.store" placeholder="筛选门店">
                        <el-option v-for="(item,a) in storeList" :key="a" :label="item.title" :value="item.store_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.status" placeholder="状态">
                        <el-option v-for="(item,s) in statusList" :key="s" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="needLon">
                    <el-date-picker
                        v-model="form.start_time"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="danger" @click="mark='add';add_edit_show=true;alerttips='添加'">添加</el-button> 
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <el-table-column prop="match_id" label="id" fixed></el-table-column>
                <el-table-column prop="store_name" label="门店"></el-table-column>
                <el-table-column prop="match_type_cn" label="比赛类型" width="200"></el-table-column>
                <el-table-column prop="match_name" label="名称"></el-table-column>
                <el-table-column prop="start_time" label="开始日期"></el-table-column>
                <el-table-column prop="end_time" label="结束日期"></el-table-column>
                <el-table-column prop="status_cn" label="状态" width="200"> </el-table-column>
                <el-table-column prop="awards" label="奖品" width="200">
                    <template slot-scope="scope">
                        <p v-for="pitem in scope.row.awards" :key="pitem.rank">{{pitem.award_title}}</p>
                    </template>
                </el-table-column>
                <el-table-column  label="操作" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row.match_id)">
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="操作"  v-else>/</el-table-column>

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
       <!-- 编辑 -->
       <el-dialog :title="editTitle" :visible.sync="add_edit_show" class="business">
            <el-form ref="form" :model="editForm" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="editForm.match_name"></el-input>
                </el-form-item>
                <el-form-item label="比赛类型">
                    <el-radio-group v-model="editForm.match_type">
                        <el-radio value="1" label="1">日K歌榜</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择门店" v-if="editTitle != '编辑'">
                    <el-checkbox-group v-model="storeId"  @change="getCheckboxVal">
                        <el-checkbox v-for="storeItem in storeList" :key="storeItem.store_id" :label="storeItem.title+'_'+storeItem.store_id">{{storeItem.title}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
     
                <el-form-item label="活动时间">
                    <el-col :span="11">
                    <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间" v-model="editForm.start_time" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                    <el-date-picker  type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间" v-model="editForm.end_time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                
                <el-form-item label="奖品" class="prizeBox">
                    <GoodCom  :default_txt='default_txt' input_url="v1/item/search" v-on:getsearchItemGood="showGoods"></GoodCom>
                    <el-input class="quntanty" v-model="prizeNum" placeholder="数量"></el-input>
                </el-form-item>
                <el-form-item label="赛事封面">
                    <!-- ['coverImg','coverPath','spantxt'] -->
                    <Upimg :coverImg="editForm.show_match_image" :coverPath="editForm.match_image" spantxt="" v-on:throwFilePath="showImg"></Upimg>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="confrim(editTitle)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 详情 -->
         <el-dialog :title="detailTitle" :visible.sync="detailShow" class="business">
            <el-table :data="detailData" stripe style="width: 100%;text-align:center">
                <el-table-column prop="rank" label="名次" fixed></el-table-column>
                <el-table-column prop="video_name" label="作品"></el-table-column>
                <el-table-column prop="nickname" label="会员" width="200"></el-table-column>
                <el-table-column prop="score" label="得分"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<style lang="scss">
.prizeBox{
    .el-form-item__content{
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        .goodsearch{
            width:333px;
        }
        .quntanty{
            width:130px;
        }
    }
}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 0
import GoodsTemplate from '../../pop/goodslist.vue';
import Upimg from '../../pop/upload.vue'
// import {draggable} from 'vuedraggable';
var url= potUrl.rpriceList;
export default {
    components:{
        GoodCom:GoodsTemplate,
        Upimg,
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            form:{
                size:20,
                page:1

            },
            statusList:[
                {status:'0',status_cn:'未开始'},
                {status:'1',status_cn:'进行中'},
                {status:'2',status_cn:'已结束'},
                {status:'-1',status_cn:'已取消'}
                
            ],
            add_edit_show:false,
            storeId:[],
            editForm:{ 
                match_name:'', 
                awards:[{item_id:'',rank:1,award_num:''}],
                match_type:'1',
                start_time:'',
                end_time:''
            },
            simVal:'',
            pageNum:1,//page
            limitList:[],
            storeList:[],
            editTitle:'添加',
            prizeNum:'',//奖品数量
            default_txt:'',//编辑是回显的奖品
            match_id:'',//赛事id
            detailShow:false,//详情显示弹框
            detailData:[],//详情table的数据
            detailTitle:''//详情弹框的头部内容
        }
    },
    mounted(){
        var that = this;
        abc.getStore(that)
        // abc.get(that,potUrl.getuserstorelist,{},function(res) {
        //     that.storeList = res.data
        // })//获取门店列表-

        abc.get(that,potUrl.matchIndex,that.form,function(res){
            that.total = parseInt(res.data.total)
            that.tableData =  res.data.list;
            console.log(that.tableData)
        });//列表
        
    },
    created(){
        var that = this;
        setTimeout(() => {
            var str = $('.router-link-active').attr('href');
            abc.limit(that,str)// 权限  
        }, 500)            
    },
    methods:{
        search(){
            const that = this;
            abc.get(that,potUrl.matchIndex,that.form,function(res){
                that.total = parseInt(res.data.total)
                that.tableData =  res.data.list;
                console.log(that.tableData)
            });//列表
        },
        theClick(url,a){
            var that = this;
            console.log(url)
            if(url == 'edit' || url == 'copy'){
                if(url == 'edit'){
                    that.editTitle = '编辑';
                }else{
                    that.editTitle = '复制'; 
                }
                
                that.match_id = a;
                abc.get(that,potUrl.matchdetail,{match_id:a},function(data){
                    var res = data.data;
                    that.editForm.match_name = res.match_name
                    that.editForm.match_type = res.match_type
                    that.editForm.show_match_image = res.show_match_image
                    that.editForm.match_image = res.match_image;
                    that.editForm.start_time = res.start_time;
                    that.editForm.end_time = res.end_time;
                    that.editForm.awards[0].item_id = res.awards[0].item_infos[0].item_id
                    that.editForm.awards[0].rank = res.awards[0].rank;
                    that.editForm.awards[0].award_num = res.awards[0].award_num;
                    that.storeId = res.store_name+'_'+res.store_id;
                    that.default_txt = res.awards[0].award_title;
                    that.prizeNum = res.awards[0].award_num;
                    var i = res.store_name+'_'+res.store_id
                    that.storeId = [i];
                    that.getCheckboxVal(that.storeId)
                    console.log(that.storeId)
                })
                that.add_edit_show = true    
            }else if(url == 'detail'){
                that.detailShow = true;
                abc.get(that,potUrl.matchusers,{match_id:a},function(data){
                    that.detailData = data.data.user_list;
                    that.detailTitle = data.data.match_name
                })
            }else{
                that.editTitle = '添加'
            }
            
            
        },           
        changePage(val){
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,potUrl.matchIndex,that.form);
        },

        confrim(a){
            //确定按钮
            var that = this,url='';
            if(a == '添加' || a == '复制'){
                url = potUrl.matchadd
            }else{
                url = potUrl.matchedit;
                that.editForm.match_id = that.match_id
            }
            that.editForm.awards[0].award_num = that.prizeNum;
            abc.post(that,url,that.editForm,function(res){
                that.add_edit_show = false;
                abc.get(that,potUrl.matchIndex,that.form,function(res){
                    that.total = parseInt(res.data.total)
                    that.tableData =  res.data.list;
                    console.log(that.tableData)
                });//列表
            })
        },
        getCheckboxVal(val){
            //获取复选框的数据 
            console.log(val)
            var arr = [];
            val.map((item)=>{
                var obj={},items = item.split('_');
                obj.store_id = items[1];
                obj.store_name = items[0];
                arr.push(obj)
            })
            this.editForm.store = arr
        },
        showGoods(res){
            //获取商品信息
            var that = this;
            that.editForm.awards[0].rank = 1;
            that.editForm.awards[0].item_id = res.item_id;
        },
        showImg(res){
            console.log(res)
            this.editForm.match_image = res
        }
    }
}

</script>